<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<style>
    .form-group > div {
        margin-bottom: 6px;
        line-height: 34px;
    }
    .form-group input {
        height: 27px;
    }
    #areaRow ul li {
        background: #FFFFFF;
    }
    #areaRow ul li:hover {
        background: #e5e6e7;
    }
    #areaRow li {
        border: 1px solid #e5e6e7;
        line-height: 30px;
        padding-left: 4px;
    }
</style>



<body class="white-bg">


<div style="padding: 20px">
    <div class="left" style="float: left;width: 33%;">
        <div class="form-group"></div>
        <div id="areaRow" style="width: 100%;"></div>
    </div>
    <div class="right" style="float: left;width: 60%">
        <div id="container" style="width: 500px;height: 500px"></div>
    </div>
</div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c1a1f9a53c4110c2244ce7a5ab77e089&plugin=AMap.PlaceSearch"></script>
<script type="text/javascript" th:inline="javascript">

      var list= [[${hospitalList}]]

    //初始化地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始地图级别
    });


    function addMarker() {
        var icon = new AMap.Icon({
            size: new AMap.Size(19, 31),
            imageSize: new AMap.Size(19, 31),

            image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",

        });
        var markerList = [];
        for (let listElement of list) {
            marker = new AMap.Marker({
                icon: icon,
                position: [listElement.longitude,listElement.latitude],
            });
            markerList.push(marker)

        }



        map.add(markerList);
    }

    $(function () {
        addMarker()
    })



</script>

</html>

